<template>
  <el-dialog
    :title="''"
    width="860px"
    top="10%"
    :close-on-click-modal="false"
    modal-append-to-body lock-scroll
    class="customer-dialog header-option"
    @close="close"
    :visible.sync="dialogVisible"
  >
    <div class="formal-title">
      <span style="margin-right: 5px">{{$t('report.formalTitle')}}</span>
      <el-tooltip class="item" effect="dark" transition="" :content="$t('report.formulaTitieTip')" placement="right">
        <span style="cursor: pointer"><i class="iconfont icon-wenzishuoming"></i></span>
      </el-tooltip>
    </div>
    <el-row :gutter="24" class="border-style" style="margin: 20px 5px 0px 5px">
      <el-col :span="8" class="col-6" style="padding: 0px">
        <div class="header">
          <span class="margin-l-10">{{$t('report.formulaList')}}</span>
          <span class="add main-color" @click="creatFormula" style="cursor: pointer"><i class="el-icon-plus"></i>{{$t('report.addFormula')}}</span>
        </div>
        <div class="content">
          <div
            v-for="(formula, index) in formulas" class="formulas"
            :key="index" :title="formula.formulaStr"
            :class="{
              current: currIndex === index
            }"
            @click="clickMenu(formula, index)"
          >
            {{formula.displayname}}
            <span class="shanchu" @click="deleteFormula(formula, index)">X</span>
          </div>
        </div>
      </el-col>
      <el-col :span="16" style="padding: 0px">
        <div v-show="isDetail">
          <BreadCrumbConfig :titleArr="titleArr" @back="cancle"></BreadCrumbConfig>
          <div class="main">
            <el-form v-if="currentFormula" ref="form" :rules="rules" :model="currentFormula" labelPosition="top">
              <el-form-item :label="$t('report.formulaName')" prop="displayname">
                <el-input v-model="currentFormula.displayname"></el-input>
              </el-form-item>
              <el-form-item :label="$t('report.formulaRule')" prop="formulaStr">
                <el-input v-model="currentFormula.formulaStr" @input="handleRule" :placeholder="$t('report.formulaPlaceholder')"></el-input>
              </el-form-item>
              <div>
                <div class="prompt">{{$t('report.formulaTip')}}</div>
                <div class="tip">
                  <div class="grey-color">{{$t('report.formulaTableZi')}}</div>
                  <span
                    v-for="(option, index) in headOPerations" :key="index"
                    style="margin-right: 10px"
                  >#{{option.displayname}}</span>
                  <!-- @click="currentFormula.formulaStr += '+' + option.displayname" -->
                </div>
              </div>
              <template v-for="(factor, index) in factors" >
                <el-row :key="index">
                  <el-col :span="12" style="padding-right:20px">
                    <el-form-item :label="factor" v-if="currentFormula.map[factor] !== '_const'" :key="'factors_' + index">
                      <el-select v-model="currentFormula.map[factor]" :placeholder="$t('report.formulaTip1')" style="width: 100%">
                        <el-option
                          v-for="option in headOPerations" :key="option.name"
                          :label="option.displayname"
                          :value="option.name"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="currentFormula.map[factor] !== '_const'">
                    <el-form-item :label="$t('report.defalutVal')">
                      <input type="text" class="el-input__inner" style="width: 218px;background-color: #f5f7fa;border-color: #e4e7ed;color: #c0c4cc;"
                             :disabled="true"
                             v-model.number="currentFormula.defaultValues[factor]">
                    </el-form-item>
                  </el-col>
                </el-row>
              </template>
              <div>
                <el-form-item :label="$t('report.computedReslut')" style="float: left;margin-right: 20px">
                  <el-input-number v-model="currentFormula.digits" size="mini" :min="0" :max="10" style="width: 250px"></el-input-number>
                </el-form-item>
                <el-form-item :label="$t('report.computedReslut1')">
                  <div class="wei-input">{{isNaN(evalRpn && evalRpn.value) ? evalRpn.value : evalRpn.value.toFixed(currentFormula.digits)}}</div>
                  <!--<el-input v-model="" disabled=""></el-input>-->
                </el-form-item>
              </div>
              <el-form-item :label="$t('report.computedReslut2')" style="margin-top: -7px;clear: both">
                <el-select v-model="currentFormula.type" @change="changeFormulaType" style="width: 100px">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-input style="width: 250px;" v-model="finUnit" disabled></el-input>
                <!--<input type="text" class="el-input__inner" style="width: 100px;" v-model="currentFormula.unit">-->
              </el-form-item>
              <div v-if="isRemark">
                <div>
                  <span style="margin-right: 10px">是否标记</span>
                  <el-radio-group v-model="currentFormula.remark" size="mini" @change="changeRemark">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </div>
                <div v-if="currentFormula.remark">
                  <el-form-item label="" class="float-l">
                    <el-select v-model="currentFormula.symbol" class="select-styl">
                      <el-option
                        v-for="item in symbolArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" class="float-l">
                    <el-select v-model="currentFormula.type" class="select-styl" disabled="disabled">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" class="float-l" :prop="'remarkVal1'" :rules="currentFormula.type !== 'minOrSec' ? remarkRule : []">
                    <el-input type="remarkVal1" v-if="currentFormula.type !== 'minOrSec'" v-model.number="currentFormula.remarkVal1" autocomplete="off" style="width: 140px;" :class="currentFormula.type !== 'default' && currentFormula.type !== 'minOrSec' ? 'symbl-top' : ''">
                      <template slot="append" v-if="currentFormula.type !== 'default' && currentFormula.type !== 'minOrSec'">
                        <span v-text="currentFormula.type === 'percentage' ? '%' : currentFormula.type === 'seconds' ? 's' : ''"></span>
                      </template>
                    </el-input>
                    <el-input type="remarkVal1" v-if="currentFormula.type === 'minOrSec'"
                              v-model="currentFormula.remarkVal1" autocomplete="off" style="width: 140px;"
                              :class="currentFormula.type !== 'default' && currentFormula.type !== 'minOrSec' ? 'symbl-top' : ''">
                      <template slot="append" v-if="currentFormula.type !== 'default' && currentFormula.type !== 'minOrSec'"><span v-text="currentFormula.type === 'percentage' ? '%' : currentFormula.type === 'seconds' ? 's' : ''"></span></template>
                    </el-input>
                  </el-form-item>
                  <div style="padding-top: 10px" class="float-l" v-if="currentFormula.symbol === '7'">至</div>
                  <el-form-item label="" class="float-l" prop="remarkVal2" v-if="currentFormula.symbol === '7'" :rules="currentFormula.type !== 'minOrSec' ? remarkRule : []">
                    <el-input type="remarkVal2" v-if="currentFormula.type !== 'minOrSec'"
                              v-model.number="currentFormula.remarkVal2" autocomplete="off" style="width: 140px;"
                              :class="currentFormula.type !== 'default' && currentFormula.type !== 'minOrSec' ? 'symbl-top' : ''">
                      <template slot="append" v-if="currentFormula.type !== 'default' && currentFormula.type !== 'minOrSec'"><span v-text="currentFormula.type === 'percentage' ? '%' : currentFormula.type === 'seconds' ? 's' : ''"></span></template>
                    </el-input>
                    <el-input type="remarkVal2" v-if="currentFormula.type === 'minOrSec'" v-model="currentFormula.remarkVal2" autocomplete="off" style="width: 140px;" :class="currentFormula.type !== 'default' && currentFormula.type !== 'minOrSec' ? 'symbl-top' : ''">
                      <template slot="append" v-if="currentFormula.type !== 'default' && currentFormula.type !== 'minOrSec'"><span v-text="currentFormula.type === 'percentage' ? '%' : currentFormula.type === 'seconds' ? 's' : ''"></span></template>
                    </el-input>
                  </el-form-item>
                </div>
              </div>
              </el-form>
            <div class="footer">
              <button type="button" class="el-button primary_btn el-button--primary" @click.stop="confirm1">{{$t('public.confirm')}}</button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
  import { getFormatTimeBySecond, deepClone } from '@/utils/m7Utils.js'
  import { checkform } from '@/utils/validate.js'
  // import { STATUS, parseFormulaStr, dal2Rpn, evalRpn } from './formulaUtil.js'
  import { parseFormulaStr, dal2Rpn, STATUS, evalRpn, toNumber } from './formulaUtil.js'
  // import { uniqBy, difference, cloneDeep } from 'lodash'
  import { uniqBy, difference, cloneDeep } from 'lodash'
  import BreadCrumbConfig from '@/components/ui-modules/breadCrumb/BreadCrumbConfig'
  export default {
    name: 'FormulaEditorDialog',
    data () {
      return {
        remarkRule: [{ required: true, message: '标记值不能为空'},{ type: 'number', message: '标记值必须为数字值'}],
        currIndex: null,
        isDetail: false,
        titleArr: [this.$t('report.formulaList'), this.$t('report.addFormula')],
        options: [{
          value: 'default',
          label: this.$t('report.defalutVal1')
        }, {
          value: 'percentage',
          label: this.$t('report.percentNum')
        }, {
          value: 'minOrSec',
          label: this.$t('report.hhmmss')
        }, {
          value: 'seconds',
          label: this.$t('public.seconds')
        }],
        symbolArr: [
          {
            value: '1',
            label: '等于'
          },
          {
            value: '2',
            label: '不等于'
          },
          {
            value: '3',
            label: '大于'
          },
          {
            value: '4',
            label: '小于'
          },
          {
            value: '5',
            label: '大于等于'
          },
          {
            value: '6',
            label: '小于等于'
          },
          {
            value: '7',
            label: '介于'
          }
        ],
        isFirst: false,
        rules: {
          displayname: [
            {required: true, message: this.$t('report.inputForName'), trigger: 'blur'}
          ],
          formulaStr: [
            {required: true, message: this.$t('report.inputFlormula'), trigger: 'blur'}
          ]
        },
        headOPerations: [],
        dialogVisible: false,
        currentFormula: null,
        formulas: []
      }
    },
    components: {
      BreadCrumbConfig
    },
    props: {
      isRemark: Boolean,
      reportType: String,
      reportName: String,
      value: {
        default () {
          return []
        }
      },
      headOptionsConfig: {
        default () {
          return []
        }
      }
    },
    watch: {
      factors (val, oldVal) {
        let that = this
        if (!that.currentFormula) {
          return
        }
        let diffVals = difference(val, oldVal)
        for (let index = 0; index < diffVals.length; index++) {
          const diffVal = diffVals[index]
          let ampValue = ''
          let defaultValue = 1
          let findConfigs = null
          if (!this.isFirst) {
            findConfigs = that.headOPerations.find(d => {
              return d.displayname.indexOf(diffVal) > -1
            })
            this.isFirst = false
          }
          // 默认值统一都为数字
          if (findConfigs) {
            ampValue = findConfigs.name
//          switch (findConfigs.timeType) {
//            case 'hhmmss':
//              defaultValue = '00:00:01'
//              break
//            case 'second':
//              defaultValue = '1s'
//              break
//            default:
//              break
//          }
          } else {
            if (that.currentFormula.map[diffVal]) {
              if (that.currentFormula.map[diffVal] !== '' || that.currentFormula.map[diffVal] !== '_const') {
                ampValue = that.currentFormula.map[diffVal]
              }
            }
          }
          if (!isNaN(diffVal)) {
            ampValue = '_const'
          }
          this.$set(that.currentFormula.map, diffVal, ampValue)
          this.$set(that.currentFormula.defaultValues, diffVal, defaultValue)
        }

        diffVals = difference(oldVal, val)
        for (let index = 0; index < diffVals.length; index++) {
          const diffVal = diffVals[index]
          this.$delete(this.currentFormula.map, diffVal)
          this.$delete(this.currentFormula.defaultValues, diffVal)
        }
      }
    },
    computed: {
      finUnit () {
        let _str = isNaN(this.evalRpn && this.evalRpn.value) ? this.evalRpn.value : this.evalRpn.value.toFixed(this.currentFormula.digits)
        let str = ''
        let val = this.currentFormula.type
        switch (val) {
          case 'default':
            str = _str
            break
          case 'percentage':
            let _num = _str * 100
            str = _num.toFixed(this.currentFormula.digits) + '%'
            break
          case 'minOrSec':
            str = getFormatTimeBySecond(Math.ceil(_str))
            break
          case 'seconds':
            str = Math.ceil(_str) + 's'
            break
        }
        return str
      },
      formulaStrParsedResult () {
        if (this.currentFormula && this.currentFormula.formulaStr) {
          return parseFormulaStr(this.currentFormula.formulaStr)
        } else {
          return []
        }
      },
      rnps () {
        try {
          return dal2Rpn(this.formulaStrParsedResult)
        } catch (error) {
          return []
        }
      },
      factors () {
        let factors = this.formulaStrParsedResult.filter(d => d.state === STATUS.FACTOR)
        factors = uniqBy(factors, d => d.subString)
        factors = factors.map(d => d.subString)
        return factors
      },
      evalRpn () {
        if (!this.currentFormula) {
          return {
            state: STATUS.VALUE,
            value: this.$t('report.computedError')
          }
        }
        const map = this.currentFormula.map
        const defaultValues = this.currentFormula.defaultValues
        let getValue = (token) => {
          if (token.state === STATUS.VALUE) {
            return Number(token.value)
          } else {
            let factor = token.subString

            if (map[factor] && map[factor] === '_const') {
              return Number(factor)
            }
            return toNumber(defaultValues[factor])
          }
        }
        if (this.rnps.length === 1 && this.rnps[0].state === 'FACTOR') {
          return {
            flag: true,
            state: STATUS.VALUE,
            value: toNumber(this.currentFormula.defaultValues[this.rnps[0].subString])
          }
        }
        try {
          return evalRpn(this.rnps, (fir, sec, cur) => {
            let v0 = getValue(fir)
            let v1 = getValue(sec)
            let value = NaN
            switch (cur.subString) {
              case '+':
                value = v0 + v1
                break
              case '-':
                value = v0 - v1
                break
              case '*':
                value = v0 * v1
                break
              case '/':
                v1 === 0 ? value = 1 : value = v0 / v1
                break
              default:
                break
            }
            return {
              flag: true,
              state: STATUS.VALUE,
              value: value
            }
          })
        } catch (error) {
          return {
            state: STATUS.VALUE,
            value: this.$t('report.computedError')
          }
        }
      }
    },
    methods: {
      handleRule () {
        this.isFirst = false
      },
      changeRemark (val) {
        if (val) {
          this.currentFormula.symbol = '1'
          this.changeFormulaType()
        }
      },
      changeFormulaType () {
        this.$refs['form'].clearValidate(['remarkVal1', 'remarkVal2'])
        if (this.currentFormula.type === 'minOrSec') {
          this.currentFormula.remarkVal1 = '00:00:00'
          this.currentFormula.remarkVal2 = '00:00:00'
        } else {
          this.currentFormula.remarkVal1 = 0
          this.currentFormula.remarkVal2 = 0
        }
      },
      cancle () {
        this.currentFormula = null
        this.currIndex = null
        this.isDetail = false
      },
      deleteFormula (obj, index) {
        this.$confirm(this.$t('report.delFormulaTip'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          if (obj.name) {
            this.$store.dispatch('delFormula', {type: this.reportType, name: obj.name}).then((res) => {
              if (res.success) {
                this.$store.dispatch('queryFetchFormula', {type: this.reportType}).then((resp) => {
                  if (resp.success) {
                    this.handleFormulas(resp.data.Formulas)
                    this.cancle()
                  }
                })
              }
            })
          } else {
            this.formulas.splice(index, 1)
          }
        }).catch(() => {
        })
      },
      clickMenu (formula, index) {
        this.isDetail = true
        this.currIndex = index
        this.currentFormula = cloneDeep(formula)
        if (this.$refs['form']) {
          this.$refs['form'].clearValidate()
        }
        this.isFirst = true
        this.titleArr = [this.$t('report.formulaList'), this.$t('report.editFormula')]
      },
      open () {
        // 一次性解决率，不在自定义公式配置下拉框中渲染，产品要求
        this.headOPerations = this.headOptionsConfig.filter(d => d.formulaVar !== false && d.name !== "fortyEightHoursRepeatRate" && d.name !== "twentyFourHoursRepeatRate")
        this.$store.dispatch('queryFetchFormula', {type: this.reportType}).then((resp) => {
          if (resp.success) {
            this.dialogVisible = true
            this.handleFormulas(resp.data.Formulas)
            this.cancle()
//          this.formulas = cloneDeep(this.value)
//          this.currentFormula = this.formulas.length ? this.formulas[0] : null
          }
        })
      },
      close () {
        this.dialogVisible = false
        this.$emit('closeFormulaDialog')
      },
      confirm1 () {
        let that = this
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.evalRpn.flag) {
              let _str = that.currentFormula.displayname + '='
              for (let i = 0; i < that.formulaStrParsedResult.length; i++) {
                if (that.formulaStrParsedResult[i].state !== 'FACTOR') {
                  _str += that.formulaStrParsedResult[i].subString
                } else {
                  let matchStr = that.currentFormula.map[that.formulaStrParsedResult[i].subString]
                  let _string = ''
                  if (matchStr === '_const') {
                    _string = that.formulaStrParsedResult[i].subString
                  } else {
                    for (let j = 0; j < that.headOPerations.length; j++) {
                      if (that.headOPerations[j].name === matchStr) {
                        _string = that.headOPerations[j].displayname
                        break
                      }
                    }
                  }
                  _str += _string
                }
              }
              this.currentFormula.formulaInstr = _str
              let isCustom = false
              for (let key in this.currentFormula.map) {
                if (this.currentFormula.map[key] === '') {
                  isCustom = true
                  break
                }
              }
              if (isCustom) {
                this.$message.error(this.$t('public.isCustom'))
                return
              }
              let _data = null
              if (this.currentFormula.remark) {
                let _checkObj = this.checkoutRemark()
                if (!_checkObj) {
                  return false
                } else {
                  _data = _checkObj
                  if (_data.symbol !== '7') {
                    _data.remarkVal2 = 0
                  } else {
                    if (_data.remarkVal1 > _data.remarkVal2) {
                      this.$message.error('结束值必须大于开始值！')
                      return false
                    }
                  }
                }
              } else {
                _data = deepClone(this.currentFormula)
                _data.remarkVal2 = 0
                _data.remarkVal1 = 0
                _data.symbol = '1'
              }
              if (!this.isRemark) {
                delete _data.remarkVal2
                delete _data.remarkVal1
                delete _data.symbol
                delete _data.remark
              }
              this.$store.dispatch('updateFormula', {type: this.reportType, formula: _data}).then((res) => {
                if (res.success) {
                  this.$store.dispatch('queryFetchFormula', {type: this.reportType}).then((resp) => {
                    if (resp.success) {
                      this.handleFormulas(resp.data.Formulas)
                      this.cancle()
                    }
                  })
                }
              })
            } else {
              this.$message.error(this.$t('report.computedError1'))
            }
          }
        })
      },
      handleFormulas (data) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].remark) {
            if (data[i].type === 'minOrSec') {
              data[i].remarkVal1 = this.handleDateTime(data[i].remarkVal1 || 0)
              data[i].remarkVal2 = this.handleDateTime(data[i].remarkVal2 || 0)
            }
          } else {
            data[i].remarkVal1 = data[i].remarkVal1 || 0
            data[i].remarkVal2 = data[i].remarkVal2 || 0
            data[i].symbol = data[i].symbol || '1'
            data[i].remark = false
          }
        }
        this.formulas = data
      },
      handleDateTime (value) {
        let hour = parseInt(value / 3600) < 10 ? '0' + parseInt(value / 3600) : parseInt(value / 3600)
        let min = parseInt((value % 3600) / 60) < 10 ? '0' + parseInt((value % 3600) / 60) : parseInt((value % 3600) / 60)
        let sec = parseInt((value % 3600) % 60) < 10 ? '0' + parseInt((value % 3600) % 60) : parseInt((value % 3600) % 60)
        return hour + ':' + min + ':' + sec
      },
      checkRemarkVal (val) {
        let value = val + ''
        if (value.indexOf(':') > -1) {
          let _arr = value.split(':')
          if (_arr.length !== 3) {
            this.$message.error('请输入正确的格式HH:MM:SS')
            return 'error'
          }
          let isNumber = false
          for (let i = 0; i < _arr.length; i++) {
            if (checkform(_arr[i], 'Number3')) {
              isNumber = true
              break
            }
          }
          if (isNumber) {
            this.$message.error('请输入数字')
            return 'error'
          }
          if (_arr[1] > 60) {
            this.$message.error('分钟不能大于60')
            return 'error'
          }
          if (_arr[2] > 60) {
            this.$message.error('秒不能大于60')
            return 'error'
          }
          let _num = parseInt(_arr[0]) * 3600 + parseInt(_arr[1]) * 60 + parseInt(_arr[2])
          return _num
        } else {
          this.$message.error('请输入正确的格式HH:MM:SS')
          return 'error'
        }
      },
      checkoutRemark () {
        let data = deepClone(this.currentFormula)
        if (data.type === 'minOrSec') {
          let obj1 = this.checkRemarkVal(data.remarkVal1)
          if (obj1 !== 'error') {
            data.remarkVal1 = obj1
          } else {
            return false
          }
          if (data.symbol === '7') {
            let obj2 = this.checkRemarkVal(data.remarkVal2)
            if (obj1 !== 'error') {
              data.remarkVal2 = obj2
            } else {
              return false
            }
          }
        }
        return data
      },
      creatFormula () {
        this.formulas.push({
          formulaInstr: '',
          displayname: this.$t('report.newFormula'),
          formulaStr: '',
          type: 'default',
          remarkVal1: 0,
          remarkVal2: 0,
          symbol: '1',
          remark: false,
          map: {},
          defaultValues: {},
          digits: 0
        })
//      if (!this.currentFormula) {
//        this.isDetail = true
//        this.titleArr = [this.$t('report.formulaList'), this.$t('report.addFormula')]
//        this.currentFormula = cloneDeep(this.formulas[0])
//        this.currIndex = 0
//      }
//      if (this.$refs['form']) {
//        this.$refs['form'].resetFields()
//      }
      },
      parseFormulaStr (formulaStr) {
        return parseFormulaStr(formulaStr)
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "../../../../assets/common.styl"
  .float-l
    float left
  .main
    padding: 20px 20px 10px 20px;
    overflow-y: auto;
    height: calc(470px - 75px)
  .wei-input
    -webkit-appearance: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    font-size: inherit;
    outline: none;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 218px;
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed;
    margin-top 7px
  .tip
    background-color $cf-level5
    padding 10px
    line-height: normal;
    font-size: 12px
    margin-bottom 10px
  .grey-color
    color $cf-level2
    margin-bottom 5px
  .prompt
    color $c-prompt
    margin 7px 0px
    line-height normal
    font-size 12px
  .main-color
    color $c-main
  .margin-l-10
    margin-left 10px
  .border-style
    border: 1px solid #ccc
    margin: 5px
    height 470px
  .col-6
    height 100%
    border-right 1px solid #ccc
    .header
      border-bottom 1px solid #ccc
      line-height 40px
      .add
        float: right;
        margin-right: 10px
    .content
      height: calc(470px - 43px);
      overflow-y: auto;
      width: 100%;
  .formulas
    position: relative;
    cursor: pointer;
    padding: 10px 0px 10px 15px
  .formulas.current
    background: #e7f1fe;
  .formulas .shanchu
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-weight bold
    font-size 14px
    visibility: hidden;
    color: #ff6b6b;
  .formulas:hover
    .shanchu
      visibility: visible;
  .border-style
    .breadCrumb
      height: 34px;
      line-height: 36px;
      padding: 3px 10px;
      border-bottom: 1px solid #ccc;
  .footer
    text-align: right;
    margin-right 20px
    clear both
  .formal-title
    position: absolute;
    top: 16px;
    left: 25px;
    color: #000;
    font-size: 14px;
  .icon-wenzishuoming
    color $c-main
.symbl-top
  margin-top 6px
.select-styl
  width 100px
  float left
</style>
